<template>
  <div class="space-y-4">
    <div 
      v-for="item in filteredItems" 
      :key="item.id" 
      class="bg-gray-50 rounded-xl p-4 hover:bg-gray-100 transition-colors cursor-pointer"
      @click="handleRoleClick(item)"
    >
      <div class="flex items-start gap-4">
        <!-- 头像 -->
        <div class="flex-shrink-0">
          <img 
            :src="item.image" 
            :alt="item.name"
            class="w-12 h-12 rounded-full object-cover border-2 border-white shadow-sm"
            @error="handleImageError"
          />
        </div>
        
        <!-- 内容 -->
        <div class="flex-1 min-w-0">
          <div class="text-gray-900 font-medium mb-1">{{ item.name }}</div>
          <p class="text-sm text-gray-500 overflow-hidden" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;">{{ item.intro }}</p>
          <div class="mt-2 flex items-center gap-4 text-xs text-gray-400">
            <span>创建时间: {{ formatDate(item.createTime) }}</span>
            <span>使用次数: {{ item.viewCount }}</span>
            <span v-if="item.isFavorited" class="text-red-500">❤️ 已收藏</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div v-if="filteredItems.length === 0" class="text-center py-12 text-gray-500">
      <svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
      </svg>
      <p>暂无自定义角色</p>
      <button 
        @click="handleCreate"
        class="mt-4 h-10 px-4 rounded-lg bg-[#635BFF] text-white hover:bg-[#5a4fcf] transition-colors"
      >
        创建第一个角色
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import type { RoleInfo } from '@/api/interface'

const props = defineProps<{
  items: RoleInfo[]
  searchKeyword?: string
}>()

const emit = defineEmits<{
  'create': []
}>()

const router = useRouter()

// 过滤后的数据（由于搜索已在API层面处理，这里主要做客户端过滤的备用）
const filteredItems = computed(() => {
  if (!props.searchKeyword) return props.items
  
  return props.items.filter(item => 
    item.name.toLowerCase().includes(props.searchKeyword!.toLowerCase()) ||
    item.intro.toLowerCase().includes(props.searchKeyword!.toLowerCase())
  )
})

const handleCreate = () => {
  emit('create')
}

// 处理角色点击，跳转到对话页面
const handleRoleClick = (role: RoleInfo) => {
  // 跳转到对话页面，使用角色ID作为路由参数
  router.push(`/details/${role.id}`)
}

// 头像加载失败处理
const handleImageError = (event: Event) => {
  const target = event.target as HTMLImageElement
  // 设置默认头像或隐藏图片
  target.style.display = 'none'
}

// 格式化时间显示
const formatDate = (dateString: string | null) => {
  if (!dateString) return '未知时间'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}
</script>
